import React, { useEffect, useState, ChangeEvent } from 'react'
import { useSelector, useDispatch,IRouteComponentProps } from 'umi'
import IState from '@/models/type'
// import { State } from '@/utils/about'
import { emojis } from '@/utils/emojis'
import { Avatar, Button, Form, Input, Popover, Pagination } from 'antd';
import moment from 'moment'
import Viewer from 'viewerjs'
import View from 'react-viewer'
import styles from './about.less'
import '@/static/font_vdks990ity/iconfont.css'
import '@/static/font_article/iconfont.css'
const about: React.FC<IRouteComponentProps> = ({history,location}) => {
    moment.locale('zh-cn')
    const state = useSelector((state: IState) => state.about)
    
    const [visible, setVisible] = useState(false);
    const [about, setabout] = useState(false)
    const [user, setuser] = useState(false)
    const [popover, setpopover] = useState(false)
    const [text, settext] = useState('')
    const dispatch = useDispatch()

    let edit = (e?: ChangeEvent<HTMLTextAreaElement>, emojis?: string) => {
         if(e&&!emojis){
              settext(e.target.value)
              e.target.value.length > 0 ? setabout(true) : setabout(false)
         }
      
        emojis && settext(text + emojis)
    }
    let shade = () => {
        let users = localStorage.getItem('user')
        users ? setuser(false) : setuser(true)
    }
    let close = () => {
        setuser(false)
    }
    let VisibleChange = () => {
        if (localStorage.getItem('user')) {
            setpopover(!popover)
        } else {
            setpopover(false)

        }
    }
    let content = () => {
        return <ul className={styles.emojis}>
            {
                Object.values(emojis).map((item, index) => {
                    return <li key={index} onClick={(e) => {
                        edit((e as unknown as ChangeEvent<HTMLTextAreaElement>), item)
                    }}>
                        {item}
                    </li>
                })
            }
        </ul>
    }
    const onChange = (pageSize: number) => {
        dispatch({
            type: 'about/getabout',
            payload: {
                page: pageSize,
                pageSize: 6
            }
        })
    }
    const onFinish = (values: any) => {
       
        localStorage.setItem('user', JSON.stringify(values))
        setuser(false)

    };
    useEffect(() => {

        dispatch({
            type: 'about/getabout',
            payload: {
                page: 1,
                pageSize: 6
            }
        })
        dispatch({
            type: 'about/query',
            payload: {

            }
        })
    }, [])
    return <div className={styles.box}>
        {
            user ? <div className={styles.shade} onClick={close}>
                <div onClick={(e) => {
                    e.stopPropagation()
                }}>
                    <p>
                        <span>请设置你的信息</span>
                        <span onClick={close}>X</span>
                    </p>
                    <Form
                        onFinish={onFinish}
                    >
                        <Form.Item
                            label="名称"
                            name="username"
                            rules={[{ required: true, message: '请输入您的称呼' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="邮箱"
                            name="email"
                            rules={[{ required: true, pattern: /^\w+@\w+\.(com|cn|net)$/, message: '输入合法邮箱地址，以便在收到回复时邮件通知' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item wrapperCol={{ offset: 8, span: 16 }} style={{ textAlign: 'right' }}>

                            <Button style={{ margin: "0 10px 0 0" }} onClick={close}>
                                取消
                            </Button>
                            <Button type="primary" htmlType="submit" danger>
                                设置
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div> : null
        }

        <div className={styles.top} id="imglist">
            <img onClick={() => {
                setVisible(true)
            }} src="https://wipi.oss-cn-shanghai.aliyuncs.com/2020-04-04/despaired-2261021_1280.jpg" alt="1" />
            <View
                visible={visible}
                onClose={() => { setVisible(false); }}
                images={[{ src: "https://wipi.oss-cn-shanghai.aliyuncs.com/2020-04-04/despaired-2261021_1280.jpg", alt: '1' }]}
            />


        </div>
        <div className={styles.content}>
            <p>
                <span>
                    评论
                </span>
            </p>
            <div className={styles.comment}>
                <div>
                    <textarea onChange={edit} name="" id="" className={styles.textarea} cols={30} rows={10} placeholder="请输入评论内容（支持 MarkDown）">
                    </textarea>
                </div>
                <p>
                    <span onClick={shade}>
                        <Popover placement="bottomLeft" content={content} visible={popover} onVisibleChange={VisibleChange} trigger="click">
                            <span className="iconfont icon-xiaolian"></span>
                            <span>表情</span>
                        </Popover>
                    </span>
                    <button className={about ? styles.disable : undefined}>发布</button>
                </p>
            </div>
            {state.list.map((item, index) => {
                return <div key={item.id} className={styles.con}>
                    <div>
                        <Avatar size={30} style={{ backgroundColor: 'red', verticalAlign: 'middle' }}>
                            {item.name[0]}
                        </Avatar>
                    </div>
                    <div>
                        <div>
                            <span>
                                {item.name}
                            </span>
                        </div>

                        <div dangerouslySetInnerHTML={{ __html: item.content }}>

                        </div>
                        <div>
                            {item.userAgent}
                            {item.children ? item.children.map(ite => {
                                return <div key={ite.id} className={styles.con}>
                                    <div>
                                        <Avatar size={30} style={{ backgroundColor: 'red', verticalAlign: 'middle' }}>
                                            {item.name[0]}
                                        </Avatar>
                                    </div>
                                    <div>
                                        <div>

                                            <span>
                                                {item.name}
                                            </span>
                                        </div>
                                        <div dangerouslySetInnerHTML={{ __html: item.content }}>

                                        </div>
                                        <div>
                                            {item.userAgent}
                                        </div>
                                    </div>
                                </div>
                            }) : null}
                        </div>
                    </div>

                </div>
            })}
            <div className={styles.pagination}>
                <Pagination size="small" total={50} onChange={onChange} />
            </div>
            <div className={styles.recommend}>
                推荐阅读
            </div>
            <div className={styles.recommends}>
                {state.commends.map(item => {
                    return <div key={item.id}>
                        <p onClick={()=>{
        history.push({
            pathname:"/Article/Detail",
            query:{
                id:item.id
            }
        })
                        }}>
                            <b>
                                <span className={styles.hover}>{item.title}</span>
                                <span>|{moment(item.createAt, "YYYY-MM-DDTHH:mm:ss.sssZ").fromNow()}</span>
                                </b>
                            <span className={styles.icon}></span>

                            {item.category ? <span>|{item.category.label}</span> : null}
                            
                        </p>
                        <div >
                            {item.cover? <div className={styles.img}>
                                <img src={item.cover ? item.cover : undefined} alt="" />
                            </div>:undefined}
                           

                            <div className={styles.con}>
                                <p>
                                    {item.summary}
                                </p>
                                <p>
                                    <span className="iconfont icon-shoucang">
                                        {item.likes}
                                    </span>
                                    <span className="iconfont icon-kanguo">
                                        {item.views}
                                    </span>
                                    <span className="iconfont icon-icon_fenxiang">
                                        分享
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                })}
            </div>
        </div>
    </div>
}
export default about